<template>
  <div>
    <h1>房价管理</h1>

    <!-- 删除 -->

    <div v-show="isPopupVisible2" class="popup-overlay">
      <div class="popup-content">
        <h4 style="margin-left: 20px">删除房间</h4>
        <div style="margin-left: 40px; margin-top: 20px">
          1.你确定要删除该房间？
        </div>
        <div style="margin-left: 40px; margin-top: 20px">
          2.该房间尚有客户入住，不可删除！
        </div>

        <div style="float: right; margin-top: 160px; margin-right: 50px">
          <vxe-button style="margin-left: 10px" @click="quxiao3"
            >取消</vxe-button
          >
          <vxe-button
            style="margin-left: 90px; background-color: #5d4f96; color: white"
            @click="baochun3"
            >确定</vxe-button
          >
        </div>
      </div>
    </div>

    <div v-show="isPopupVisible3" class="popup-overlay">
      <div class="popup-content">
        <h4 style="margin-left: 20px">删除房间</h4>
        <div style="margin-left: 40px; margin-top: 20px">
          1.你确定要删除该房间？
        </div>

        <div style="float: right; margin-top: 200px; margin-right: 50px">
          <vxe-button style="margin-left: 10px" @click="quxiao3"
            >取消</vxe-button
          >
          <vxe-button
            style="margin-left: 90px; background-color: #5d4f96; color: white"
            @click="baochun3"
            >确定</vxe-button
          >
        </div>
      </div>
    </div>

    <!-- 修改 -->

    <div v-show="isPopupVisible1" class="popup-overlay">
      <div class="popup-content">
        <h4 style="margin-left: 20px">编辑房价</h4>

        <div style="margin-left: 20px">
          <div style="display: inline-block">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">房价名称</label>
            <el-input
              v-model="input201"
              style="width: 200px; margin-left: 15px"
              placeholder="请填写房价名称"
            />
          </div>

          <div style="display: inline-block; margin-left: 10px">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">房型</label>
            <el-select
              v-model="value224"
              placeholder="房型"
              style="width: 205px; margin-left: 10px"
            >
              <el-option
                v-for="item in options"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              />
            </el-select>
          </div>
        </div>

        <div style="margin-left: 20px; margin-top: 15px">
          <div style="display: inline-block">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">平台</label>
            <el-select
              v-model="value213"
              placeholder="平台"
              style="width: 205px; margin-left: 10px"
            >
              <el-option
                v-for="item in options1"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              />
            </el-select>
          </div>



          <div style="margin-left: 20px; margin-top: 15px;display: inline-block">
          <div>
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">状态</label>

            <input
              type="radio"
              name="radio"
              value="true"
              id=""
              @click="danxuan2024"
              v-model="danxuan201"
              style="margin-left: 40px"
            /><span style="font-size: 15px">启用</span>
            <input
              type="radio"
              name="radio"
              value="false"
              @click="danxuan2024"
              v-model="danxuan201"
              id=""
              style="margin-left: 40px"
            /><span style="font-size: 15px">禁用</span>
          </div>
        </div>


        </div>



        <div style="margin-left: 60px; margin-top: 15px">
          <div style="display: inline-block">
            <label for="author" style="margin-left: 10px">备注</label>
            <el-input
              v-model="text1"
              style="width: 400px; margin-left: 15px"
              maxlength="30"
              placeholder="请填写意见"
              show-word-limit
              type="text"
            />
          </div>
        </div>

        <div style="float: right; margin-top: 50px; margin-right: 60px">
          <vxe-button style="margin-left: 10px" @click="quxiao2"
            >取消</vxe-button
          >
          <vxe-button
            style="margin-left: 90px; background-color: #5d4f96; color: white"
            @click="baochun1"
            >保存</vxe-button
          >
        </div>
      </div>
    </div>
    <!-- 添加 -->
    <div v-show="isPopupVisible" class="popup-overlay">
      <div class="popup-content">
        <h4 style="margin-left: 20px">新增房价</h4>

        <div style="margin-left: 20px">
          <div style="display: inline-block">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">房价名称</label>
            <el-input
              v-model="input20"
              style="width: 200px; margin-left: 15px"
              placeholder="请填写房价名称"
            />
          </div>

          <div style="display: inline-block; margin-left: 10px">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">房型</label>
            <el-select
              v-model="value20"
              placeholder="房型"
              style="width: 205px; margin-left: 10px"
            >
              <el-option
                v-for="item in options"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              />
            </el-select>
          </div>
        </div>

        <div style="margin-left: 20px; margin-top: 15px">
          <div style="display: inline-block">
            <span
              style="color: red; font-size: 20px; float: left; margin-top: 5px"
              >*</span
            ><label for="author" style="margin-left: 10px">平台</label>
            <el-select
              v-model="value21"
              placeholder="平台"
              style="width: 205px; margin-left: 10px"
            >
              <el-option
                v-for="item in options1"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              />
            </el-select>
          </div>
          <div
            style="margin-left: 45px; margin-top: 15px; display: inline-block"
          >
            <div>
              <span
                style="
                  color: red;
                  font-size: 20px;
                  float: left;
                  margin-top: 5px;
                "
                >*</span
              ><label for="author" style="margin-left: 10px">状态</label>
              <input
                type="radio"
                name="radio"
                value="true"
                @click="danxuan"
                id=""
                style="margin-left: 40px"
              /><span style="font-size: 15px">启用</span>
              <input
                type="radio"
                name="radio"
                value="false"
                @click="danxuan"
                id=""
                style="margin-left: 40px"
              /><span style="font-size: 15px">禁用</span>
            </div>
          </div>
        </div>

        <div style="margin-left: 60px; margin-top: 15px">
          <div style="display: inline-block">
            <label for="author" style="margin-left: 10px">备注</label>
            <el-input
              v-model="text"
              style="width: 400px; margin-left: 15px"
              maxlength="30"
              placeholder="请填写意见"
              show-word-limit
              type="text"
            />
          </div>
        </div>

        <div style="float: right; margin-top: 50px; margin-right: 60px">
          <vxe-button style="margin-left: 10px" @click="quxiao"
            >取消</vxe-button
          >
          <vxe-button
            style="margin-left: 90px; background-color: #5d4f96; color: white"
            @click="baochun"
            >保存</vxe-button
          >
        </div>
      </div>
    </div>
    <div style="margin-bottom: 20px">
      <el-select v-model="value2" placeholder="平台" style="width: 120px">
        <el-option
          v-for="item in options1"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        />
      </el-select>
      <el-select
        v-model="value"
        placeholder="状态"
        style="width: 120px; margin-left: 10px"
      >
        <el-option key="true" label="启用" value="true" />
        <el-option key="false" label="禁用" value="false" />
      </el-select>
      <el-select
        v-model="value3"
        placeholder="房型"
        style="width: 120px; margin-left: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        />
      </el-select>
      <el-input
        v-model="input"
        style="width: 200px; margin-left: 10px"
        placeholder="房价名称"
      />
      <vxe-button
        style="margin-left: 10px; background-color: #5d4f96; color: white"
        @click="chaxun"
        >查询</vxe-button
      >
      <vxe-button style="margin-left: 10px" @click="chongzhi">重置</vxe-button>
      <vxe-button style="margin-left: 10px" @click="xinzheng">新增</vxe-button>
      <vxe-button @click="exportEvent" style="margin-left: 10px"
        >导出</vxe-button
      >
      <vxe-button @click="printEvent">直接打印</vxe-button>
    </div>

    <vxe-table
      border
      class="mytable-style"
      show-footer
      ref="tableRef"
      :export-config="{}"
      :data="tableData"
      align="center"
      :header-cell-class-name="headerCellClassName"
      :row-class-name="rowClassName"
      :cell-class-name="cellClassName"
    >
      <vxe-column field="seq" type="seq" width="70"></vxe-column>
      <vxe-column field="housename" title="房价名称" width="80"></vxe-column>
      <vxe-column field="room_id.name" title="房型" width="120"></vxe-column>
      <vxe-column field="pingtaiid.name" title="平台" width="70"></vxe-column>
      <vxe-column
        field="tai"
        title="状态"
        width="70"
        :formatter="formatStatus"
      ></vxe-column>
      <vxe-column field="username" title="创建人" width="90"></vxe-column>
      <vxe-column field="time" title="创建时间"></vxe-column>
      <vxe-column field="beizu" title="备注"></vxe-column>
      <vxe-column title="操作">
        <template #default="{ row }">
          <span @click="editRow(row)">编辑</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span @click="deleteRow(row)">删除</span>
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <div style="float: right; margin-top: 30px">
      <el-pagination
        :current-page="currentPage4"
        :page-size="pageSize4"
        :page-sizes="[5, 6, 7, 8]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ArrowDown } from "@element-plus/icons-vue";

import { ComponentSize, ElMessage } from "element-plus";
let isPopupVisible = ref(false);
let isPopupVisible1 = ref(false);
let isPopupVisible2 = ref(false);
let isPopupVisible3 = ref(false);

let formatStatus = ({ cellValue }) => {
  return cellValue ? "启用" : "禁用";
};

// 添加
let input20 = ref("");
let value20 = ref("");
let value21 = ref("");
let text = ref("");
let danxuan20 = ref("");
let name = JSON.parse(sessionStorage.getItem("obj"))[0].username;
let baochun = async () => {
  await axios.post("http://localhost:3000/jia2", {
    housename: input20.value,
    room_id: value20.value,
    pingtaiid: value21.value,
    tai: danxuan20.value,
    username: name,
    beizu: text.value,
    time: getCurrentTime(),
  });
  isPopupVisible.value = false;
  ElMessage({
    message: "添加成功",
    type: "success",
  });
  zhixing();
};

let quxiao = () => {
  isPopupVisible.value = false;
};
let quxiao2 = () => {
  isPopupVisible1.value = false;
};
let danxuan = (event) => {
  danxuan20.value = event.target.value;
};
let danxuan2024 = (event) => {
  danxuan201.value = event.target.value;
};
function getCurrentTime() {
  const now = new Date();

  // 获取年、月、日、小时、分钟、秒
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  // 拼接成所需的格式
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const value = ref("");
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const input = ref("");
const options = ref([]);
const options1 = ref([]);
const options2 = ref([]);

const tableRef = ref();
const tableData = ref([]);
onMounted(() => {
  zhixing();
});

// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const size = ref<ComponentSize>("default");
const background = ref(true);
const disabled = ref(false);
let length = ref(null);
const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  console.log(val, 111);
  currentPage4.value = 1;
  chaxun();
};
const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  console.log(val, 222);
  chaxun();
};
const printEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.print();
  }
};

let zhixing = async () => {
  let data = await axios.post("http://localhost:3000/shuju1", {
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  length.value = data.data.data4.length;
  console.log(length.value);

  tableData.value = data.data.data;
  options.value = data.data.data3;
  options1.value = data.data.data2;
};

let input201 = ref("");
let value202 = ref("");
let value213 = ref("");
let value224 = ref("");
let text1 = ref("");
let _id = ref("");
let danxuan201 = ref("");
let shanchuid = ref("");
const deleteRow = async (row) => {
  shanchuid.value = row._id;

  if (row.tai == true) {
    isPopupVisible2.value = true;
  } else if (row.tai == false) {
    isPopupVisible3.value = true;
  }
};

let quxiao3 = () => {
  isPopupVisible2.value = false;
  isPopupVisible3.value = false;
};
let baochun3 = async () => {
  await axios.post("http://localhost:3000/deleteone1", { _id: shanchuid.value });
  isPopupVisible2.value = false;
  isPopupVisible3.value = false;
  zhixing();
};
const editRow = (row) => {
  input201.value = row.housename;
  value224.value = row.room_id._id;
  value213.value=row.pingtaiid._id
  danxuan201.value = row.tai;
  text1.value = row.beizu;
  isPopupVisible1.value = true;
  _id.value = row._id;
  
};

let baochun1 = async () => {

  let data = await axios.post("http://localhost:3000/updateone1", {
    _id: _id.value,
    housename: input201.value,
    room_id: value224.value,
    pingtaiid: value213.value,
    tai: danxuan201.value,
    beizu: text1.value,
  });
  isPopupVisible1.value = false;
  zhixing();
};

const exportEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.openExport();
  }
};

const headerCellClassName = ({ column }) => {
  return "col-blue";
};
let chaxun = async () => {
  console.log(value.value,value2.value, value3.value,input.value);
  let data = await axios.post("http://localhost:3000/chaxun2", {
    tai: value.value,
    pingtaiid:value2.value,
    room_id: value3.value,
    housename: input.value,
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  tableData.value = data.data.data;
};
let xinzheng = () => {
  isPopupVisible.value = true;
};
let chongzhi = async () => {
  value.value = "";
  value1.value = "";
  value2.value = "";
  value3.value = "";
  input.value = "";
  let data = await axios.post("http://localhost:3000/shuju1", {
    page: currentPage4.value,
    limit: pageSize4.value,
  });
  console.log(data.data.data);

  tableData.value = data.data.data;
};
</script>
<style scoped>
::v-deep(.mytable-style.vxe-table .vxe-header--column.col-blue) {
  background-color: #dfdcea;
  color: #7c7878;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平垂直居中 */
}
.popup-content {
  background-color: white;
  border-radius: 5px; /* 圆角 */
  width: 600px; /* 宽度 */
  height: 350px; /* 高度 */
  /* 确保弹出层在视口中居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #888;
  transform: translate(-50%, -50%);
  box-shadow: 5px 5px 5px #888;
}
</style>